<template>
  <div id="app">
    <el-dialog :visible.sync="detailDialog" title="材料明细" center width="60%" top="10px">
      <div class="top">
        <p style="font-weight: 600;font-size: 15px">用户下单信息:</p>
        <div style="display: flex;justify-content: center;margin-top: 15px">
          <span>门店名称：{{ info.assignName }}</span>
          <span v-if="!type">项目负责人：{{ info.placeName }}</span>
          <span v-if="[1,2].includes(type)">项目负责人：{{ info.projectUserName }}</span>
          <span v-if="!type">联系电话：{{ info.placePhone }}</span>
          <span v-if="[1,2].includes(type)">联系电话：{{ info.projectPhone }}</span>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 10px">
          <span>门店地址：{{ info.address }}</span>
          <span style="color: red">发货仓库：{{ info.areaName }}</span>
          <span>备注：{{ info.remark }}</span>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 10px">
          <span>材料总价：{{ info.totalPrice || info.materialsMoney }}</span>
          <span>折扣金额：0</span>
          <span>应收金额：{{ info.totalPrice }}</span>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 10px">
          <span v-if="!type">回款金额：{{ info.refundAmount }}</span>
          <span v-if="type==1">回款金额：{{ info.cadRefundAmount }}</span>
          <span v-if="type==2">回款金额：{{ info.fillRefundAmount }}</span>
          <span style="display: flex">回款凭证：
            <div v-if="!type" v-for="(v,i) in info.refundProof"><el-image :key="i"
                                                             style="width: 50px; height: 50px"
                                                             ref="preview" :src="'https://'+v"
                                                             :preview-src-list="['https://'+v]">
            </el-image>
          </div>
            <div v-if="type==1" v-for="(v,i) in info.cadRefundProof"><el-image :key="i"
                                                             style="width: 50px; height: 50px"
                                                             ref="preview" :src="'https://'+v"
                                                             :preview-src-list="['https://'+v]">
            </el-image>
          </div>
            <div v-if="type==2" v-for="(v,i) in info.fillRefundProof"><el-image :key="i"
                                                             style="width: 50px; height: 50px"
                                                             ref="preview" :src="'https://'+v"
                                                             :preview-src-list="['https://'+v]">
            </el-image>
          </div>
          </span>
          <span>回款日期：{{ info.refundTime }}</span>
        </div>
      </div>
      <div class="button">
        <p style="font-weight: 600;font-size: 15px;margin-bottom: 15px;margin-top: 15px">材料信息:</p>
        <div v-for="item in materialDate" class="detail">
          <span>名称：{{ item.materialName }}</span>
          <span style="margin-left: 30px">数量：<span style="color: red">{{ item.outNum }}</span></span>
          <span>规格：{{ item.norm }}</span>
          <span>单价：<span style="color: red">{{ item.salePrice }}</span></span>
        </div>
      </div>
      <span slot="footer"> <el-button style="background-color:#e0e0e0;"
                                      @click="detailDialog=false">返 回</el-button></span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "materialDetail",
  data() {
    return {
      detailDialog: false,
      info: {},
      type: "",
      materialDate: []
    }
  },
  methods: {
    handleOpen(val, type) {
      this.type = type
      this.info = val
      // console.log(val)
      this.detailDialog = true
      //全部材料
      if (!type) {
        this.$api.materialsGetWechatOrderMaterialsDetail({orderNo: val.orderNo}).then(res => {
          this.materialDate = res
        })
      }
      //1报货2补货
      if (type) {
        this.$api.materialsGetWechatOrderMaterialsDetail({assignTaskId: val.assignTaskId, state: type}).then(res => {
          this.materialDate = res
        })
      }
      // else if(type==1){
      //   this.$api.materialsGetWechatOrderMaterialsDetail({assignTaskId: val.assignTaskId, state:""}).then(res => {
      //     this.materialDate = res
      //   })
      // }
    }
  }
}
</script>

<style scoped lang="less">
.top {
  span {
    display: block;
    width: 33%;
  }
}

.detail {
  display: flex;
  margin-bottom: 3px;

  span {
    width: 25%;
  }
}
</style>